<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { Cell, List, Toast } from "vant";
import { getStoresList } from "@/api/api";
let pageSize = ref(5)
let pageNumber = ref(0)
let active = ref(0)
let latitude = ref<string>('')
let longitude = ref<string>('')
let cityName = ref<string>('')
let loading = ref(false);
let finished = ref(true);
interface IList {
  address: string
  distance: number
  latitude: string
  longitude: string
  name: string
}
let list = ref<IList[]>([])
let areaList = ref<IList[]>([])

watch(() => longitude.value, (newValue, oldValue) => {
  if (newValue) {
    loadList()
    finished.value = false
  }
})
let loadList = () => {
  pageNumber.value++
  let params = {
    cityName: cityName.value,
    longitude: longitude.value,
    latitude: latitude.value,
    pageSize: pageSize.value,
    pageNumber: pageNumber.value,
    name: ''
  };
  getStoresList(params).then((reponse: any) => {
    console.log(reponse)
    if (reponse.data.code == "000000") {
      loading.value = true
      finished.value = false
      if (reponse.data.data.length > 0) {
        list.value = list.value.concat(reponse.data.data)
        loading.value = false
      } else {
        finished.value = true
      }
    } else {
      Toast(reponse.data.msg)
      finished.value = true
    }
  });
};
const childRef = ref<any>(null);
let showMap = (item: any) => {
  active.value = 1
  areaList.value = item
  childRef.value.clickData(areaList.value);
};
</script>
<template>
  <List v-model:loading="loading" :finished="finished" finished-text="亲，没有更多了" @load="loadList">
    <Cell v-for="item in list" :key="item.name" :value="item.distance + '公里'" :title="item.name" :label="item.address"
      :item="item" is-link @click="showMap(item)" />
  </List>
</template>
<style>
</style>